<template>
	<view class="payment_details">
		<view class="pay_de_info">
			<image class="pay_de_info_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/xiangqing_bg.png'" mode=""></image>
			<view class="pay_de_info_top">
				<image class="de_in_t_img" v-if="pageType == 'water'" :src="'https://community.chuangxiangdianli.com/images/propertyImg/shudi.png'" mode=""></image>
				<image class="de_in_t_img" v-if="pageType == 'electric'" :src="'https://community.chuangxiangdianli.com/images/propertyImg/dianfei@2x.png'" mode=""></image>
				<image class="de_in_t_img" v-if="pageType == 'property'" :src="'https://community.chuangxiangdianli.com/images/propertyImg/wuye_2@2x.png'" mode=""></image>
				<text class="de_in_t_jn" v-if="pageType == 'water'">水费缴纳</text>
				<text class="de_in_t_jn" v-if="pageType == 'electric'">电费缴纳</text>
				<text class="de_in_t_jn" v-if="pageType == 'property'">物业费缴纳</text>
				<text class="de_in_t_num">{{billDetails.paymentMoney}}</text>
				<view class="de_in_t_succ">
					<image v-if="billDetails.status == 2" class="de_in_t_succ_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/ok@2x.png'" mode=""></image>
					<image v-else class="de_in_t_succ_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/fail.png'" mode=""></image>
					<text>{{billDetails.status | status}}</text>
				</view>
			</view>
			<view class="pay_de_info_con">
				<view class="info_con_item">
					<text>户主名</text>
					<text>孙正</text>
				</view>
				<view class="info_con_item">
					<text>缴费类型</text>
					<text>{{billDetails.feeType | feeType}}</text>
				</view>
				<view class="info_con_item">
					<text>支付方式</text>
					<text>{{billDetails.pay_type | payType}}</text>
				</view>
				<view class="info_con_item">
					<text>交易时间</text>
					<text>{{billDetails.pay_at || '0'}}</text>
				</view>
				<view class="info_con_item">
					<text>订单号</text>
					<text>{{billDetails.pay_no}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.pageType = option.type 
			this.orderId = option.id
			console.log(option)
		},
		onShow() {
			this.getBillDetails()
		},
		data() {
			return {
				pageType: 'water',
				orderId: null,
				// 缴费详情
				billDetails:null
			};
		},
		methods:{
			getBillDetails(){
				this.$mrequest2({
					url: 'Mini/bill/bill_details',
					data:{
						order_id: this.orderId
					}
				}).then(res => {
					if(res.code == 200){ 
						this.billDetails = res.data
						console.log(this.billDetails)
					}
				})
			}
		},
		filters:{
			// 支付方式
			payType(type){
				if(type == 1){
					return '微信支付';
				}else{
					return '支付宝';
				}  
			},
			// 缴费类型
			feeType(type){
				if(type == 1){
					return '电费'
				}else if (type == 2){
					return '水费'
				}else{
					return '物业费';
				} 
			},
			// 缴费状态
			status(type){
				if(type == 1){
					return '缴费失败'
				}else{
					return '缴费成功'
				}
			}
		}
	}
</script>

<style lang="scss">
.payment_details{
	padding: 27rpx 22rpx 0 22rpx;
	height: 100vh;
	background-color: #f7f8f9;
	.pay_de_info{
		position: relative;
		width: 100%;
		height: 830rpx;
		.pay_de_info_top{
			padding: 48rpx 45rpx;
			position: absolute;
			width: 100%;
			top: 0;
			height: 386rpx;
			text-align: center;
			border-bottom: 4rpx dashed  #9e9e9e; 
			.de_in_t_img{
				width: 58rpx;
				height: 75rpx;
			}
			.de_in_t_jn{
				display: block;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
			}
			.de_in_t_num{
				display: block;
				font-size: 52rpx;
				font-weight: 700;
			}
			.de_in_t_succ{
				margin-top: 20rpx;
				color: #656565;
				font-size: 26rpx;
				text-align: center;
				.de_in_t_succ_img{
					margin-right: 16rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.pay_de_info_con{
			padding: 48rpx 45rpx;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 405rpx; 
			.info_con_item{
				display: flex;
				justify-content: space-between;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 26rpx;
				color: #6b6b6b;
			}
		}
	}
}
</style>
